<!DOCTYPE html>
<html>
  <head>
    <title>购物车</title>
    <meta charset="utf-8" />
    <style type="text/css">
      h1 {
        text-align:center;
      }
      table {
        margin:0 auto;
        width:60%;
        border:2px solid #aaa;
        border-collapse:collapse;
      }
      table th, table td {
        border:2px solid #aaa;
        padding:5px;
      }
      th {
        background-color:#eee;
      }
      td{
      	text-align:center;
      }
    </style>
    <script src="../js/jquery-1.11.1.js"></script>
    <script type="text/javascript">
    	//加入购物车
    	function add_shoppingcart(btn) {
    		//obj.eq(0)==$(obj[0])是等价的
    		//获取商品名和单价
			var name=$(btn).parent().siblings().eq(0).html();
    		var price=$(btn).parent().siblings().eq(1).html();
    		console.log(name+","+price);
    		//创建新行
    		var tr=$(
 				'<tr>'+
 		          '<td>'+name+'</td>'+
 		          '<td>'+price+'</td>'+
 		          '<td align="center">'+
 		           	'<input type="button" value="-" onclick="increase1(this);"/>'+
 		            '<input type="text" size="3" readonly value="1" style="text-align:center;"/>'+
 		           	'<input type="button" value="+" onclick="increase(this);"/>'+
 		          '</td>'+
 		          '<td>'+price+'</td>'+
 		         ' <td align="center"><input type="button" value="x" onclick="increase2(this);"/></td>'+
 		       ' </tr>'
    				);
    		//将其追加到tbody之下
    		console.log(11);
    		$("#goods").append(tr);
    		f1();
		};
		function increase(btn) {
			var n=$(btn).prev().val();
			$(btn).prev().val(++n);
			var price=$(btn).parent().prev().html();
			//计算金额
			$(btn).parent().next().html(price*n);
			f1();
		}
		function increase1(btn) {
			var n=$(btn).next().val();
			
			if(n>1){
				$(btn).next().val(--n);
				console.log(n);
				var price=$(btn).parent().prev().html();
				//计算金额
				$(btn).parent().next().html(price*n);
				f1();
			}
		}
		function increase2(btn) {
			console.log($(btn).parent().parent().remove());
			f1();
		}
		function f1() {
			var moeny=0;
			for(var i=0;i<$("#goods").children().length;i++){
				var n=parseInt($("#goods").children().eq(i).children().eq(3).html());
				moeny=moeny+n;
			}
			console.log($("#hj").next().html(moeny));
			
		}
    </script>
  </head>
  <body>
    <h1>真划算</h1>
    <table>
      <tr>
        <th>商品</th>
        <th>单价(元)</th>
        <th>颜色</th>
        <th>库存</th>
        <th>好评率</th>
        <th>操作</th>
      </tr>   
      <tr>
        <td>罗技M185鼠标</td>
        <td>80</td>
        <td>黑色</td>
        <td>893</td>
        <td>98%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>微软X470键盘</td>
        <td>150</td>
        <td>黑色</td>
        <td>9028</td>
        <td>96%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>洛克iphone6手机壳</td>
        <td>60</td>
        <td>透明</td>
        <td>672</td>
        <td>99%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>蓝牙耳机</td>
        <td>100</td>
        <td>蓝色</td>
        <td>8937</td>
        <td>95%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>金士顿U盘</td>
        <td>70</td>
        <td>红色</td>
        <td>482</td>
        <td>100%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
    </table>
  
    <h1>购物车</h1>
    <table>
      <thead>
        <tr>
          <th>商品</th>
          <th>单价(元)</th>
          <th>数量</th>
          <th>金额(元)</th>
          <th>删除</th>
        </tr>
      </thead>
      <tbody id="goods">
      <!-- 
        <tr>
          <td>罗技M185鼠标</td>
          <td>80</td>
          <td align="center">
            <input type="button" value="-"/>
            <input type="text" size="3" readonly value="1"/>
            <input type="button" value="+"/>
          </td>
          <td>80</td>
          <td align="center"><input type="button" value="x"/></td>
        </tr>
         -->
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3" align="right" onclick="f1();" id="hj">总计</td>
          <td id="total"></td>
          <td></td>
        </tr>
      </tfoot>
    </table>    
  </body>
</html>